<template>
  <div class="index">
    <!-- 顶部 -->
    <div class="top"><Admin></Admin></div>
    <!-- bottom -->
    <div class="bottom">
      <div class="left"><SideNav></SideNav></div>
      <div class="right">
        <div class="content">
          <el-scrollbar style="height: 100%;">
            <!-- 当前位置 -->
            <div class="current_position">
              <p class="breadcrumb">当前位置 :</p>
              <el-breadcrumb separator="/">
                <el-breadcrumb-item class="up">生活服务</el-breadcrumb-item>
                <el-breadcrumb-item class="up"><a @click="goTo('/ArtisanCheck')">技工审核</a></el-breadcrumb-item>
                <el-breadcrumb-item>查看</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <!-- 列表 -->
            <div class="userinformation">
              <div class="title">账号信息</div>
              <div class="msg">
                <div> <p class="title">技工ID：</p><p>{{msg.id}}</p></div>
                <div> <p class="title">入驻类目：</p><input type="text" :value="cname" class="input" /></div>
                <div> <p class="title">头像：</p><img :src="msg.headImg" class="img" ></div>
                <div> <p class="title">姓名：</p><input type="text" :value="msg.userName" class="input" /></div>
                <div> <p class="title">微信昵称：</p><input type="text" :value="msg.nickName" class="input" /></div>
                <div>
                  <p class="title">性别：</p>
                  <el-radio-group v-model="msg.gender">
                    <el-radio :label="1">男</el-radio>
                    <el-radio :label="2">女</el-radio>
                  </el-radio-group>
                </div>
                <div>
                  <p class="title">地址：</p>
                  <input type="text" value="四川省" class="input" />
                  <input type="text" value="成都市" class="input" />
                  <input type="text" :value="area" class="input" />
                </div>
                <div>
                  <p class="title title1">地址：</p>
                  <input type="text" :value="msg.address" class="input inputLong"/>
                </div>
                <div>
                  <p class="title">坐标：</p>
                  <input type="text" class="input" placeholder="请输入经度" v-model="msg.lng" />
                  <input type="text" class="input" placeholder="请输入纬度" v-model="msg.lat"/>
                </div>
                <div>
                  <p class="title">标签：</p>
                  <el-checkbox-group v-model="tags">
                    <el-checkbox v-for="(tag,index) in taglist" :label="tag.dictId" :key="tag.name">{{tag.name}}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div> <p class="title">手机号码：</p><p>{{msg.phoneNumber}}</p></div>
                <div> <p class="title">注册时间：</p><p>{{msg.createTime | dateForma('YYYY-MM-DD HH:mm:ss')}}</p></div>
                <div> <p class="title">提交审核：</p><p>{{msg.createTime | dateForma('YYYY-MM-DD HH:mm:ss')}}</p></div>
              </div>
              <div class="title">认证资料</div>
              <div class="msg msg1">
                <div>
                  <p class="title title2">技能证书/营业执照：</p>
                  <div class="imgs">
                    <img :src="msg.skillsCertificatePic" class="img1">
                  </div>
                </div>
                <div>
                  <p class="title title2">身份证：</p>
                  <div class="imgs" v-for="(pic,index) in idPic" :key="index">
                    <img :src="pic.url" class="img1">
                  </div>
                </div>
                <div>
                  <p class="title title2">健康证：</p>
                  <div class="imgs">
                    <img :src="msg.healthCertificate" class="img1">
                  </div>
                </div>
              </div>
              <div class="box">
                <p @click="pass()">通过审核</p>
                <p @click="reject()" class="pass">驳回认证</p>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let moment = require("moment")
  import Admin from '@/components/Admin.vue'
  import SideNav from '@/components/SideNav.vue'

  export default {
    name: 'ArtisanCheckDetail',
    components:{
      Admin,
      SideNav
    },
    data () {
      return {
        id:'',
        msg:{},
        cname:'',//入驻类目
        area:'',//所在区的名称
        tags: [],//标签
        taglist: [],//所有标签
        idPic:[],//身份证
      }
    },
    mounted() {
      this.id = JSON.parse(JSON.stringify(this.$route.query.data.id));// 取到路由带过来的参数
      console.log('路由带过来的参数',this.id);
      this.findDetail();//查询技工详情
    },
    filters: {// 时间格式过滤
      dateForma(dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
        return moment(dataStr).format(pattern)
      }
    },
    methods: {
      //路由
      goTo(path) {
        this.$router.push(path);
      },
      // 时间格式过滤
      dateForma(row,column){
        var date = row[column.property];
        if(date == undefined){
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      },
      // 查询技工详情
      findDetail(){
        this.$axios.post(this.baseURL1+'admin/mechanicAudit/info',{
          "id":this.id,
          "requestSource":"PC",
        }).then((res)=>{
          console.log(res,"查询技工详情");
          if(res.data.code==1){
            this.msg = res.data.data;//技工信息
            this.getAppGoodsClassifyInfo()//根据类目id获取名字
            this.getArea()//查所在区
            this.getTag()//获取技工标签
            if(res.data.data.idCardPic){//身份证
              var idCardPic = res.data.data.idCardPic.split(",");//产品副图列表
              idCardPic.map((item, index) => {//副图赋值
                this.idPic.push({ url: item })
                //console.log(this.idPic)
              })
            }
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //根据一级id获取详情
      getAppGoodsClassifyInfo(){
        this.$axios.post(this.baseURL1+'admin/goodsClassify/getAppGoodsClassifyInfo',{
          "id":this.msg.goodsClassifyId,
          "requestSource":"PC",
        }).then((res)=>{
          if(res.data.code==1){
            this.cname =res.data.data.cname
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
     //查区
     getArea(){
       this.$axios.post(this.baseURL1+'area/getAreaList',{
         "parentId":this.msg.city,
         "requestSource":"PC",
       }).then((res)=>{
          if(res.data.code==1){
            for(var i=0;i<=res.data.data.records.length;i++){
              if(res.data.data.records[i].id===this.msg.area){
                this.area = res.data.data.records[i].areaName
              }
            }
          }
       }).catch((err)=>{
         console.log('request fail', err);
       })
     },
      //获取技工标签
      getTag(){
        this.$axios.post(this.baseURL1+'admin/dictionary/listByType',{
          "type":'rzbq',
          "requestSource":"PC",
        }).then((res)=>{
          console.log(res,"获取技工标签");
          if(res.data.code==0){
            this.taglist=res.data.data
            console.log(this.taglist)
            // this.tags=this.taglist[0]
          }
        }).catch((err)=>{
          console.log('request fail', err);
        })
      },
      //审核通过
      pass(){
        console.log(this.msg)
        console.log(this.tags)
        var label = '';//标签
        for(var i = 0; i < this.tags.length; i++){
          label += this.tags[i]+ ","
        }
        console.log("标签",label)
        if(!this.msg.lng){
          console.log("请输入经度")
          this.$message({
            type: 'error',
            message: '请输入经度'
          });
        }else if(!this.msg.lat){
          console.log("请输入纬度")
          this.$message({
            type: 'error',
            message: '请输入纬度'
          });
        }else{
          this.$confirm('确认通过该审核?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.post(this.baseURL1+'admin/mechanicAudit/pass',{
              "id": this.id,
              "requestSource":"PC",
              "userName":this.msg.userName,
              "gender":this.msg.gender,
              "lng":this.msg.lng,
              "lat":this.msg.lat,
              "province":this.msg.province,
              "city":this.msg.city,
              "area":this.msg.area,
              "address":this.msg.address,
              "phoneNumber":this.msg.phoneNumber,
              "goodsClassifyId":this.msg.goodsClassifyId,
              "tag":label
            }).then((res)=>{
              if(res.data.code==1){
                this.$message({
                  type: 'success',
                  message: '审核成功'
                });
                setTimeout(()=>{
                  this.$router.push({
                    path: '/ArtisanCheck',
                  })
                },1000)
              }else{
                this.$message({
                  type: 'error',
                  message: res.data.msg
                });
              }
            }).catch((err)=>{
              console.log('request fail', err);
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      },
      //审核驳回
      reject(){
        console.log(this.msg)
        this.$confirm('确认驳回该审核?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post(this.baseURL1+'admin/mechanicAudit/noPass',{
            "id": this.id,
            "requestSource":"PC",
          }).then((res)=>{
            if(res.data.code==1){
              this.$message({
                type: 'success',
                message: '驳回成功'
              });
              setTimeout(()=>{
                this.$router.push({
                  path: '/ArtisanCheck',
                })
              },1000)
            }else{
              this.$message({
                type: 'error',
                message: res.data.msg
              });
            }
          }).catch((err)=>{
            console.log('request fail', err);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
        /* if(!this.msg.lng){
          console.log("请输入经度")
          this.$message({
            type: 'error',
            message: '请输入经度'
          });
        }else if(!this.msg.lat){
          console.log("请输入纬度")
          this.$message({
            type: 'error',
            message: '请输入纬度'
          });
        }else{
          this.$confirm('确认驳回该审核?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.post(this.baseURL1+'admin/mechanicAudit/noPass',{
              "id": this.id,
              "requestSource":"PC",
              "userName":this.msg.userName,
              "lng":this.msg.lng,
              "lat":this.msg.lat,
              "province":this.msg.province,
              "city":this.msg.city,
              "area":this.msg.area,
              "address":this.msg.address,
              "phoneNumber":this.msg.phoneNumber
            }).then((res)=>{
              if(res.data.code==1){
                this.$message({
                  type: 'success',
                  message: '驳回成功'
                });
                setTimeout(()=>{
                  this.$router.push({
                    path: '/ArtisanCheck',
                  })
                },1000)
              }else{
                this.$message({
                  type: 'error',
                  message: res.data.msg
                });
              }
            }).catch((err)=>{
              console.log('request fail', err);
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        } */
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '@/assets/css/index.scss'; //这个分号一定要写，要不会报错
  @import '@/assets/css/user.scss'; //这个分号一定要写，要不会报错
  .msg{
    width: 100%;
    height: auto;
    p{
      display: inline-block;
    }
    .title{
      background-color: #ffffff;
      font-weight: bold;
      width: 95px;
      height: 50px;
      text-align: right;
      line-height: 50px;
      display: inline-block;
    }
    .input{
      width: 200px;
      height: 30px;
      line-height: 30px;
      border-radius: 6px;
      outline: none;
      border: 1px solid #d1d1d1;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .img{
      width: 80px;
      height: 80px;
      border: 1px solid #d1d1d1;
      border-radius: 40px;
      box-sizing: border-box;
      vertical-align: middle;
    }
    .inputLong{
      width: 610px;
    }
    .title1{
      color: #ffffff;
    }
    .title2{
      line-height: 20px;
      padding-top: 10px;
    }
    .imgs{
      display: inline-block;
      width: auto;
      height: 110px;
      vertical-align: middle;
      img{
        width: 100px;
        height: 100px;
        padding-right: 10px;
        padding-bottom: 10px;
      }
    }
  }
  >>> .el-checkbox-group{
    display: inline-block;
  }
  .msg1{
    padding-bottom: 100px;
  }
  .userinformation{
    position: relative;
    .box{
      width: 100%;
      height: 100px;
      background-color: #ffffff;
      position: fixed;
      bottom: 0;
      left: 0;
      text-align: center;
      line-height: 100px;
      p{
        display: inline-block;
        width: 100px;
        height: 40px;
        background-color: green;
        color: #ffffff;
        line-height: 40px;
        border-radius: 6px;
        margin: 0 50px;
        cursor: pointer;
      }
      .pass{
        background-color: red;
      }
    }
  }
</style>
